<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>生命周期</title>
</head>
<body>
  <div id="root"></div>
  
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    // Vue 生命周期函数是在某个时刻自动执行的函数
    // onClick 函数会在点击的时候执行（手动执行）
    const app = Vue.createApp({
      data(){ // 数据
        return {
          message: 'Hello Vue'
        }
      },
      methods: { // 方法
        onClick(){
          alert('clilck');
        }
      },
      // Vue 实例创建完成之前
      beforeCreate() {
        console.log('beforeCreate');
      },
      // Vue 实例创建完毕之前
      created() {
        console.log('created');
      },
      // Has template options? No -> Compile el's innerHTML as template
      // 模版渲染到页面之前
      beforeMount() {
        console.log('befor mount');
      },
      // 模版渲染到页面完毕
      mounted() {
        console.log('mounted');
      },
      // Virtual DOM re-renderd and patch; vm.$data.message = 'Hi Vue'
      // 数据发生改变时
      beforeUpdate() {
        const content = document.getElementById('root').innerHTML;
        console.log('beforeUpdate', content);
      },
      // 数据发生改变，并且页面重新渲染完毕
      updated() {
        const content = document.getElementById('root').innerHTML;
        console.log('updated', content);
      },
      // when app.unmount() is called
      // Vue 应用失效时
      beforeUnmount() {
        const content = document.getElementById('root').innerHTML;
        console.log('beforeUnmount', content);
      },
      // Vue 应用失效，并且 DOM 完全移除完毕
      unmounted() {
        const content = document.getElementById('root').innerHTML;
        console.log('unmounted', content)
      },
      // 模版
      template: '<div @click="onClick"><h1>{{ message }}</h1></div>',
    });
    const vm = app.mount('#root');
  </script>
</body>
</html>